{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索结果：{{ query }}</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入jsPDF库用于PDF生成 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        /* 基础样式与湘西风格色彩方案 */
        :root {
            --primary-red: #A62928; /* 湘西红 */
            --primary-brown: #8B4513; /* 棕褐色 */
            --secondary-brown: #5D4037; /* 深棕色 */
            --light-brown: #D7CCC8; /* 浅棕色 */
            --cream: #F5F0E6; /* 米白色 */
            --black: #212121; /* 近黑色 */
        }

        body {
            background-color: var(--cream);
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238b4513' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            color: var(--secondary-brown);
            font-family: "Microsoft YaHei", "SimSun", serif;
        }

        .results-container {
            margin: 30px auto;
            width: 90%;
            max-width: 1000px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border: 1px solid var(--light-brown);
        }

        /* 返回首页按钮样式 */
        .home-btn {
            display: inline-block;
            margin-bottom: 20px;
            padding: 8px 15px;
            background-color: var(--primary-brown);
            color: white;
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .home-btn:hover {
            background-color: var(--primary-red);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-decoration: none;
        }

        .home-btn i {
            margin-right: 5px;
        }

        /* 搜索框样式 */
        .search-box {
            margin: 20px 0 30px;
            position: relative;
        }

        #searchInput {
            width: 100%;
            padding: 12px 15px;
            font-size: 16px;
            border: 2px solid var(--light-brown);
            border-radius: 4px 0 0 4px;
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        }

        #searchInput:focus {
            border-color: var(--primary-brown);
            outline: none;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 5px rgba(139, 69, 19, 0.3);
        }

        .search-box .btn {
            background-color: var(--primary-red);
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 16px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .search-box .btn:hover {
            background-color: #8B2323;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .search-box .btn i {
            margin-right: 5px;
        }

        /* 标题样式 */
        h1 {
            color: var(--primary-red);
            border-bottom: 2px solid var(--light-brown);
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: bold;
            position: relative;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 80px;
            height: 2px;
            background-color: var(--primary-red);
        }

        p {
            color: var(--secondary-brown);
            margin-bottom: 20px;
        }

        /* 搜索结果项样式 */
        .result-item {
            border: 1px solid var(--light-brown);
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .result-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background-color: var(--primary-brown);
            transition: width 0.3s ease;
        }

        .result-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        }

        .result-item:hover::before {
            width: 8px;
        }

        .result-title {
            font-size: 18px;
            color: var(--primary-brown);
            font-weight: bold;
            margin-bottom: 12px;
            transition: color 0.3s ease;
            padding-left: 5px;
        }

        .result-item:hover .result-title {
            color: var(--primary-red);
        }

        .result-content {
            color: var(--secondary-brown);
            line-height: 1.7;
            font-size: 15px;
        }

        .result-content p {
            margin-bottom: 8px;
        }

        .result-content p:last-child {
            margin-bottom: 0;
        }

        /* 导出PDF按钮样式 */
        .export-pdf-btn {
            display: inline-block;
            margin-top: 15px;
            padding: 6px 12px;
            background-color: var(--primary-brown);
            color: white;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .export-pdf-btn:hover {
            background-color: var(--primary-red);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }

        .export-pdf-btn i {
            margin-right: 5px;
        }

        /* 无结果样式 */
        .no-results {
            text-align: center;
            padding: 60px 30px;
            color: var(--secondary-brown);
            background-color: rgba(245, 240, 230, 0.5);
            border-radius: 8px;
            border: 1px dashed var(--light-brown);
        }

        .no-results i {
            font-size: 48px;
            color: var(--light-brown);
            margin-bottom: 20px;
            opacity: 0.7;
        }

        .no-results p {
            font-size: 16px;
            margin-bottom: 0;
        }

        /* 装饰元素 - 湘西风格图案 */
        .decorative-element {
            position: absolute;
            width: 60px;
            height: 60px;
            opacity: 0.05;
            z-index: 0;
        }

        .top-left {
            top: 20px;
            left: 20px;
        }

        .bottom-right {
            bottom: 20px;
            right: 20px;
            transform: rotate(180deg);
        }

        /* 加载提示样式 */
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .loading i {
            color: var(--primary-brown);
            font-size: 24px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .results-container {
                width: 95%;
                padding: 20px 15px;
                margin: 15px auto;
            }

            h1 {
                font-size: 24px;
            }

            .search-box .btn {
                width: 100%;
                border-radius: 4px;
                margin-top: 10px;
            }

            #searchInput {
                border-radius: 4px;
            }
        }
    </style>
</head>
<body>
    <div class="container results-container">
        <!-- 湘西风格装饰元素 -->
        <div class="decorative-element top-left">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path fill="#A62928" d="M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z M50,80 C33.5,80 20,66.5 20,50 C20,33.5 33.5,20 50,20 C66.5,20 80,33.5 80,50 C80,66.5 66.5,80 50,80 Z M50,30 C44.5,30 40,34.5 40,40 C40,45.5 44.5,50 50,50 C55.5,50 60,45.5 60,40 C60,34.5 55.5,30 50,30 Z M50,60 C47.2,60 45,62.2 45,65 C45,67.8 47.2,70 50,70 C52.8,70 55,67.8 55,65 C55,62.2 52.8,60 50,60 Z"/>
            </svg>
        </div>

        <!-- 返回首页按钮 -->
        <a href="/search/" class="home-btn">
            <i class="fas fa-home"></i> 返回首页
        </a>

        <div class="search-box input-group">
            <input type="text" id="searchInput" class="form-control" value="{{ query }}" placeholder="输入搜索内容...">
            <span class="input-group-btn">
                <button class="btn btn-primary" onclick="handleSearch()">
                    <i class="fas fa-search"></i> 再次搜索
                </button>
            </span>
        </div>

        <h1>搜索结果：{{ query }}</h1>
        <p>找到 {{ count }} 条结果</p>

        <!-- 加载提示 -->
        <div class="loading" id="loadingIndicator">
            <i class="fas fa-spinner"></i> 正在生成PDF文件...
        </div>

        {% if count > 0 %}
            {% for result in results %}
                <div class="result-item" id="result-{{ forloop.counter }}">
                    <div class="result-title">{{ result.title }}</div>
                    <div class="result-content">
                        {{ result.content|linebreaks }}
                        {% if result.start or result.end %}
                            <p><i class="fas fa-map-marker-alt" style="color: var(--primary-red);"></i> 出发地: {{ result.start }} | 目的地: {{ result.end }}</p>
                        {% endif %}
                        {% if result.date %}
                            <p><i class="far fa-calendar" style="color: var(--primary-brown);"></i> 日期: {{ result.date }}</p>
                        {% endif %}
                    </div>
                    <!-- 导出PDF按钮 -->
                    <button class="export-pdf-btn" onclick="exportToPdf('result-{{ forloop.counter }}', '{{ result.title|escapejs }}')">
                        <i class="fas fa-file-pdf"></i> 导出PDF
                    </button>
                </div>
            {% endfor %}
        {% else %}
            <div class="no-results">
                <i class="fas fa-search"></i>
                <p>没有找到匹配的结果，请尝试其他关键词</p>
            </div>
        {% endif %}

        <div class="decorative-element bottom-right">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path fill="#A62928" d="M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z M50,80 C33.5,80 20,66.5 20,50 C20,33.5 33.5,20 50,20 C66.5,20 80,33.5 80,50 C80,66.5 66.5,80 50,80 Z M50,30 C44.5,30 40,34.5 40,40 C40,45.5 44.5,50 50,50 C55.5,50 60,45.5 60,40 C60,34.5 55.5,30 50,30 Z M50,60 C47.2,60 45,62.2 45,65 C45,67.8 47.2,70 50,70 C52.8,70 55,67.8 55,65 C55,62.2 52.8,60 50,60 Z"/>
            </svg>
        </div>
    </div>

    <script>
        // 搜索功能
        function handleSearch() {
            const input = document.getElementById('searchInput').value.trim();
            if (input) {
                const queryParams = new URLSearchParams({ query: input });
                window.location.href = `/search/results/?${queryParams.toString()}`;
            }
        }

        // 支持回车键搜索
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                handleSearch();
            }
        });

        // 导出PDF功能
        function exportToPdf(elementId, title) {
            // 显示加载指示器
            const loadingIndicator = document.getElementById('loadingIndicator');
            loadingIndicator.style.display = 'block';

            // 获取要导出的元素
            const element = document.getElementById(elementId);

            // 使用html2canvas将HTML转换为Canvas
            html2canvas(element, {
                scale: 2, // 提高分辨率
                useCORS: true,
                logging: false
            }).then(canvas => {
                // 隐藏加载指示器
                loadingIndicator.style.display = 'none';

                // 创建jsPDF实例
                const { jsPDF } = window.jspdf;
                const pdf = new jsPDF('p', 'mm', 'a4');

                // 计算PDF中的图像尺寸
                const imgData = canvas.toDataURL('image/jpeg', 1.0);
                const imgWidth = 210; // A4宽度(mm)
                const pageHeight = 297; // A4高度(mm)
                const imgHeight = canvas.height * imgWidth / canvas.width;
                let heightLeft = imgHeight;
                let position = 0;

                // 添加标题
                pdf.setFontSize(16);
                pdf.setTextColor(166, 41, 40); // 湘西红
                pdf.text(title, 10, 20);
                pdf.line(10, 25, 200, 25); // 添加下划线

                // 添加内容图片
                position = 30; // 标题下方留出空间
                pdf.addImage(imgData, 'JPEG', 10, position, imgWidth - 20, imgHeight - 40);
                heightLeft -= pageHeight;

                // 如果内容太长，添加新页面
                while (heightLeft > 0) {
                    position = heightLeft - imgHeight;
                    pdf.addPage();
                    pdf.addImage(imgData, 'JPEG', 10, position, imgWidth - 20, imgHeight);
                    heightLeft -= pageHeight;
                }

                // 保存PDF文件
                const fileName = `${title.replace(/\s+/g, '_')}_${new Date().toISOString().slice(0,10)}.pdf`;
                pdf.save(fileName);
            }).catch(error => {
                // 隐藏加载指示器并显示错误
                loadingIndicator.style.display = 'none';
                console.error('PDF生成失败:', error);
                alert('PDF生成失败，请重试');
            });
        }
    </script>
</body>
</html>
